<template>
  <div>
    <div v-show="!showProcess">
      <!--top-->
      <div class="top-header border-bottom fixed-top">
        <div class="top-back"><a href="javascript:history.go(-1)"
                                 class="goBack">返回</a></div>
        <h2 class="f36 color-000">商品发布成功</h2></div>
      <div class="p-20 mt-97">
        <div class="success-box p-30 bg-fff">
          <p class=" mt-40 f36 color-000 text-center">{{detail.title}}</p>
          <p class="f28 color-666 text-center mt-40">商品价格：{{detail.price}}元</p>
          <div class="text-center mt-40">
            <span class="span-icon-tiem f36 color-m1">提交成功</span>
          </div>
          <p class="f28 color-666 text-center mt-40">商品会在2小时内完成审核</p>
          <div class="line-btn-two mt-60 clearfix">
            <a class="fl f38 border text-center color-333 bg-fff" href="JavaScript: void(0)" @click="continueSell">继续发布</a>
            <a class="fr f38 text-center color-fff bg-m1" href="JavaScript: void(0)" @click="goMember">查看商品</a>
          </div>
          <div class="proclo mt-60 mb-30 f32 text-center color-196" @click="showProcess = true">交易流程</div>
        </div>
        <div class="success-box p-30 mt-20 bg-fff">
          <p class="f30 mt-20 color-666">其他说明</p>
          <p class="f28 mt-20 color-666 lh-44"><span class="fontbold">1</span>、您可以在<span
             class="color-m1">我的</span>> <span class="color-m1">我是卖家</span> > <span class="color-m1">手游商品</span>查看审核结果。
          </p>
          <p class="f28 mt-10 color-666 lh-44"><span class="fontbold">2</span>、交易前请第一时间登录5173查看您的订单，没有订单都是骗子！</p>
          <p class="f28 mt-10 mb-20 color-666 lh-44"><span class="fontbold">2</span>、任何以“兼职”，“刷信誉”，“做任务”，“缴纳保证金”为借口的均为诈骗行为，谨防上当！
          </p>
        </div>
      </div>
    </div>
    <!--交易流程-->
    <div class="process-main " v-show="showProcess">
      <div class="top-header border-bottom">
        <div class="top-back">
          <a href="javascript:void(0)" @click="showProcess = false" class="goBack">返回</a>
        </div>
        <h2 class="f36 color-000">交易流程</h2>
      </div>
      <div class="process-conn">
        <ul>
          <li>
            <div class="pro-left pro-left-bj"><span class="hover">1</span></div>
            <div class="pro-right">
              <i class="prico"></i>
              <h2>商品通过5173审核上架</h2>
            </div>
          </li>
          <li>
            <div class="pro-left"><span>2</span></div>
            <div class="pro-right">
              <i class="prico"></i>
              <h2>卖家等待买家线上购买</h2>
            </div>
          </li>
          <li>
            <div class="pro-left"><span>3</span></div>
            <div class="pro-right">
              <i class="prico"></i>
              <h2>买家在线购买完成付款</h2>
            </div>
          </li>
          <li>
            <div class="pro-left"><span>4</span></div>
            <div class="pro-right" id="seller-help4">
              <i class="prico"></i>
              <h2>客服联系买卖双方，完成在线换绑</h2>
              <!--<p><a id="bindingsmb" target="_blank" href="https://aq.qq.com/cn2/mobile_index">点击绑定</a></p>-->
            </div>
          </li>
          <li class="bacder">
            <div class="pro-left"><span>5</span></div>
            <div class="pro-right" id="seller-help5">
              <i class="prico"></i>
              <h2>交易成功，等待收款</h2>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'

  export default {
    data() {
      return {
        showProcess: false, // 是否显示交易流程
        goodsId: this.$route.query.goodsId,
        detail: {}
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      /* 继续发布 */
      continueSell() {
        this.$router.push({path: '/vue/sell-home/2'})
      },
      /* 查看商品点击 */
      goMember() {
        this.$router.push({path: '/vue/memberseller/sellerGoodsListofPc?status=0&operator=1'})
      },
      /* 获取商品基本信息 */
      init() {
        this.getGoodsDetail({bizOfferId: this.goodsId}).then(goods => {
          this.detail = goods
        })
      },
      ...mapActions({
        getGoodsDetail: 'MG_GOODS_DETAIL'
      })
    }
  }
</script>
